<style include="trusted-style common-style">
  :host {
    overflow: hidden;
  }

  #main {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  #tabStrip {
    flex: 0 0 auto;
    margin-bottom: calc(var(--personalization-app-grid-item-spacing) / 2);
    width: 100%;
  }

  #tabStrip cr-button {
    border: 0;
  }

  #tabStrip cr-button[aria-pressed='false'] {
    color: var(--cros-text-color-secondary);
  }

  #albumsContent,
  #photosByAlbumIdContent,
  #photosContent,
  #zeroState {
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
    width: 100%;
  }
</style>
<main id="main" aria-label$="[[i18n('googlePhotosLabel')]]" tabindex="-1">
  <template is="dom-if" if="[[isTabStripVisible_(albumId, albums_)]]">
    <div id="tabStrip">
      <cr-button id="photosTab" aria-pressed="[[isPhotosTabSelected_(tab_)]]"
        on-click="onTabSelected_">
        <div class="text">[[i18n('googlePhotosPhotosTabLabel')]]</div>
      </cr-button>
      <cr-button id="albumsTab" aria-pressed="[[isAlbumsTabSelected_(tab_)]]"
        on-click="onTabSelected_">
        <div class="text">[[i18n('googlePhotosAlbumsTabLabel')]]</div>
      </cr-button>
    </div>
  </template>
  <template is="dom-if" if="[[!isPhotosEmpty_(photos_)]]">
    <google-photos-photos id="photosContent"
      hidden$="[[!isPhotosTabVisible_(hidden, tab_)]]">
    </google-photos-photos>
  </template>
  <template is="dom-if" if="[[!isAlbumsEmpty_(albums_)]]">
    <google-photos-albums id="albumsContent"
      hidden$="[[!isAlbumsTabVisible_(hidden, tab_)]]">
    </google-photos-albums>
    <google-photos-photos-by-album-id id="photosByAlbumIdContent" album-id="[[albumId]]"
      hidden$="[[!isPhotosByAlbumIdTabVisible_(hidden, tab_)]]">
    </google-photos-photos-by-album-id>
  </template>
  <template is="dom-if" if="[[isPhotosEmpty_(photos_)]]">
    <google-photos-zero-state id="zeroState"></google-photos-zero-state>
  </template>
</main>
